<template>
	<view>
		<view class="container">
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
		</view>
		<soure :url="url"></soure>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://www.baidu.com/link?url=7HblO3vhVuSHjPoldvjaDaXOXvi3rvoaQYCEbkVdowsjT1MnvE-Ntep011mu_OxHmE4RXKXYAuZNZRHGeKQfuZUvEHZXW2VYi81R9aQHXpW&wd=&eqid=b7e196050009262400000006601bf301'
			}
		},
		onLoad() {

		},
		methods: {
		}
	}
</script>

<style lang="scss">
	page {
		background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
		height: 100vh;
		/* == height: 100%  */
		overflow: hidden;
		font-family: 'Times New Roman', Times, serif;
		justify-content: center;
		align-items: center;
	}

	.container {
		position: relative;
		width: 100%;
		height: 100%;
		-webkit-transform: rotate(45deg);
		transform: rotateZ(45deg);
		-webkit-animation: sky 200000ms linear infinite;
		animation: sky 200000ms linear infinite;
	}

	.meteor {
		position: absolute;
		left: 50%;
		top: 50%;
		height: 2px;
		background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
		border-radius: 999px;
		-webkit-filter: drop-shadow(0 0 6px #699bff);
		filter: drop-shadow(0 0 6px #699bff);
		-webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
		animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
	}

	.meteor::before,
	.meteor::after {
		content: '';
		position: absolute;
		top: calc(50% - 1px);
		right: 0;
		height: 2px;
		background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
		-webkit-transform: translateX(50%) rotateZ(45deg);
		transform: translateX(50%) rotateZ(45deg);
		border-radius: 100%;
		-webkit-animation: shining 3000ms ease-in-out infinite;
		animation: shining 3000ms ease-in-out infinite;
	}

	.meteor::after {
		-webkit-transform: translateX(50%) rotateZ(-45deg);
		transform: translateX(50%) rotateZ(-45deg);
	}

	/* 1 */
	.meteor:nth-child(1) {
		top: calc(50% - 185px);
		left: calc(50% - 150px);
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}

	.meteor:nth-child(1)::before,
	.meteor:nth-child(1)::after,
	.meteor:nth-child(1)::after {
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}

	/* 2 */
	.meteor:nth-child(2) {
		top: calc(50% - 50px);
		left: calc(50% - 180px);
		-webkit-animation-delay: 9288ms;
		animation-delay: 9288ms;
	}

	.meteor:nth-child(2)::before,
	.meteor:nth-child(2)::after,
	.meteor:nth-child(2)::after {
		-webkit-animation-delay: 9288ms;
		animation-delay: 9288ms;
	}

	.meteor:nth-child(3) {
		top: calc(50% - 145px);
		left: calc(50% - 135px);
		-webkit-animation-delay: 8600ms;
		animation-delay: 8600ms;
	}

	.meteor:nth-child(3)::before,
	.meteor:nth-child(3)::after,
	.meteor:nth-child(3)::after {
		-webkit-animation-delay: 8600ms;
		animation-delay: 8600ms;
	}

	.meteor:nth-child(4) {
		top: calc(50% - 78px);
		left: calc(50% - 155px);
		-webkit-animation-delay: 3288ms;
		animation-delay: 3288ms;
	}

	.meteor:nth-child(4)::before,
	.meteor:nth-child(4)::after,
	.meteor:nth-child(4)::after {
		-webkit-animation-delay: 3288ms;
		animation-delay: 3288ms;
	}

	.meteor:nth-child(5) {
		top: calc(50% - 183px);
		left: calc(50% - 8px);
		-webkit-animation-delay: 5588ms;
		animation-delay: 5588ms;
	}

	.meteor:nth-child(5)::before,
	.meteor:nth-child(5)::after,
	.meteor:nth-child(5)::after {
		-webkit-animation-delay: 5588ms;
		animation-delay: 5588ms;
	}

	.meteor:nth-child(6) {
		top: calc(50% - 30px);
		left: calc(50% - 195px);
		-webkit-animation-delay: 9388ms;
		animation-delay: 9388ms;
	}

	.meteor:nth-child(6)::before,
	.meteor:nth-child(6)::after,
	.meteor:nth-child(6)::after {
		-webkit-animation-delay: 9388ms;
		animation-delay: 9388ms;
	}

	.meteor:nth-child(7) {
		top: calc(50% - 95px);
		left: calc(50% - 70px);
		-webkit-animation-delay: 2588ms;
		animation-delay: 2588ms;
	}

	.meteor:nth-child(7)::before,
	.meteor:nth-child(7)::after,
	.meteor:nth-child(7)::after {
		-webkit-animation-delay: 2588ms;
		animation-delay: 2588ms;
	}

	.meteor:nth-child(8) {
		top: calc(50% - 60px);
		left: calc(50% - 70px);
		-webkit-animation-delay: 5288ms;
		animation-delay: 5288ms;
	}

	.meteor:nth-child(8)::before,
	.meteor:nth-child(8)::after,
	.meteor:nth-child(8)::after {
		-webkit-animation-delay: 5288ms;
		animation-delay: 5288ms;
	}

	.meteor:nth-child(9) {
		top: calc(50% - 75px);
		left: calc(50% - 250px);
		-webkit-animation-delay: 888ms;
		animation-delay: 888ms;
	}

	.meteor:nth-child(9)::before,
	.meteor:nth-child(9)::after,
	.meteor:nth-child(9)::after {
		-webkit-animation-delay: 888ms;
		animation-delay: 888ms;
	}

	.meteor:nth-child(9) {
		top: calc(50% - 76px);
		left: calc(50% - 240px);
		-webkit-animation-delay: 2388ms;
		animation-delay: 2388ms;
	}

	.meteor:nth-child(9)::before,
	.meteor:nth-child(9)::after,
	.meteor:nth-child(9)::after {
		-webkit-animation-delay: 2388ms;
		animation-delay: 2388ms;
	}

	.meteor:nth-child(10) {
		top: calc(50% - 85px);
		left: calc(50% - 6px);
		-webkit-animation-delay: 3588ms;
		animation-delay: 3588ms;
	}

	.meteor:nth-child(10)::before,
	.meteor:nth-child(10)::after,
	.meteor:nth-child(10)::after {
		-webkit-animation-delay: 3588ms;
		animation-delay: 3588ms;
	}

	.meteor:nth-child(11) {
		top: calc(50% - 135px);
		left: calc(50% - 260px);
		-webkit-animation-delay: 2888ms;
		animation-delay: 2888ms;
	}

	.meteor:nth-child(11)::before,
	.meteor:nth-child(11)::after,
	.meteor:nth-child(11)::after {
		-webkit-animation-delay: 2888ms;
		animation-delay: 2888ms;
	}

	.meteor:nth-child(12) {
		top: calc(50% - 15px);
		left: calc(50% - 8px);
		-webkit-animation-delay: 388ms;
		animation-delay: 388ms;
	}

	.meteor:nth-child(12)::before,
	.meteor:nth-child(12)::after,
	.meteor:nth-child(12)::after {
		-webkit-animation-delay: 388ms;
		animation-delay: 388ms;
	}

	.meteor:nth-child(13) {
		top: calc(50% - 155px);
		left: calc(50% - 50px);
		-webkit-animation-delay: 7288ms;
		animation-delay: 7288ms;
	}

	.meteor:nth-child(13)::before,
	.meteor:nth-child(13)::after,
	.meteor:nth-child(13)::after {
		-webkit-animation-delay: 7288ms;
		animation-delay: 7288ms;
	}

	.meteor:nth-child(14) {
		top: calc(50% - 28px);
		left: calc(50% - 80px);
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}

	.meteor:nth-child(14)::before,
	.meteor:nth-child(14)::after,
	.meteor:nth-child(14)::after {
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}

	.meteor:nth-child(15) {
		top: calc(50% - 35px);
		left: calc(50% - 200px);
		-webkit-animation-delay: 7588ms;
		animation-delay: 7588ms;
	}

	.meteor:nth-child(15)::before,
	.meteor:nth-child(15)::after,
	.meteor:nth-child(15)::after {
		-webkit-animation-delay: 7588ms;
		animation-delay: 7588ms;
	}

	.meteor:nth-child(16) {
		top: calc(50% - 40px);
		left: calc(50% - 250px);
		-webkit-animation-delay: 1888ms;
		animation-delay: 1888ms;
	}

	.meteor:nth-child(16)::before,
	.meteor:nth-child(16)::after,
	.meteor:nth-child(16)::after {
		-webkit-animation-delay: 1888ms;
		animation-delay: 1888ms;
	}


	@-webkit-keyframes tail {
		0% {
			width: 0;
		}

		30% {
			width: 100px;
		}

		100% {
			width: 0;
		}
	}

	@keyframes tail {
		0% {
			width: 0;
		}

		30% {
			width: 100px;
		}

		100% {
			width: 0;
		}
	}

	@-webkit-keyframes shining {
		0% {
			width: 0;
		}

		50% {
			width: 30px;
		}

		1000% {
			width: 0;
		}
	}

	@keyframes shining {
		0% {
			width: 0;
		}

		50% {
			width: 30px;
		}

		1000% {
			width: 0;
		}
	}

	@-webkit-keyframes shooting {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(300px);
			transform: translateX(300px);
		}
	}

	@keyframes shooting {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(300px);
			transform: translateX(300px);
		}
	}

	@-webkit-keyframes sky {
		0% {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		100% {
			-webkit-transform: rotate(405deg);
			transform: rotate(405deg);
		}
	}

	@keyframes sky {
		0% {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		100% {
			-webkit-transform: rotate(405deg);
			transform: rotate(405deg);
		}
	}
</style>
